<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker
        @keyup.enter.native="handleFilter"
        class="filter-item"
        size="small"
        value-format="yyyy-MM-dd"
        v-model="params['startDate']"
        type="date"
        placeholder="选择开始日期"
      ></el-date-picker>
      <el-date-picker
        @keyup.enter.native="handleFilter"
        class="filter-item"
        size="small"
        value-format="yyyy-MM-dd"
        v-model="params['endDate']"
        type="date"
        placeholder="选择结束日期"
      ></el-date-picker>
      <el-input
        @keyup.enter.native="handleFilter"
        size="small"
        style="width: 200px;"
        class="filter-item"
        placeholder="商品名称"
        v-model="params['title']"
      ></el-input>
      <el-input
        @keyup.enter.native="handleFilter"
        size="small"
        style="width: 200px;"
        class="filter-item"
        placeholder="用户名称"
        v-model="params['userName']"
      ></el-input>
      
      <el-select size="small" v-model="params['status']" clearable placeholder="商品状态">
        <el-option
          v-for="(item,index) in goodsStatusData()"
          :key="index"
          :label="item"
          :value="index"
        ></el-option>
      </el-select>
      <el-button
        class="filter-item"
        size="small"
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="loadData"
      >搜索</el-button>
    </div>
    <el-table
      :data="list"
      :height="tableHeight"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>

      <el-table-column prop="userName" align="center" label="用户名称" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.userName}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="title" align="center" label="商品名称" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="goodsNo" align="center" label="商品编码" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.goodsNo}}</span>
        </template>
      </el-table-column>
      
      <el-table-column prop="status" align="center" label="商品状态" width="200">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status|tagStatus">{{scope.row.status|goodsStatus}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="stock" align="center" label="当前库存" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.stock}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" align="center" label="当前被加入购物车" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.createTime|parseTime}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.pageNo"
        :page-sizes="[10,20,30,50]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        startDate: "",
        endDate: "",
        titile: "",
        userName: "",
        status: ''
      },
      tableHeight: 400,
      total: 0
    };
  },
  methods: {
    loadData() {
      this.listLoading = true;
      this.$get("admin/business_report/goods_cart/count", this.params)
        .then(data => {
          this.listLoading = false;
          this.list = data.rows;
          this.total = data.total;
        })
        .catch(_ => {
          this.listLoading = false;
        });
    },
    handleCurrentChange() {
      this.loadData();
    },
    handleSizeChange(val) {
      this.params.pageSize = parseInt(`${val}`);
      this.loadData();
    }
  },
  created() {
    this.loadData();
    this.tableHeight = window.innerHeight - 300;
  }
};
</script>
